<template>
    <div class="manager-container">
      <!--  头部  -->
      <div class="manager-header">
        <div class="manager-header-left">
          <img src="@/assets/imgs/logo.png" />
          <div class="title">扶贫惠农(帮扶人员)服务系统</div>
        </div>
  
        <div class="manager-header-center">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
  
        <div class="manager-header-right">
          <el-dropdown placement="bottom">
            <div class="avatar">
              <img :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
              <div>{{ user.name ||  '帮扶人员' }}</div>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="goToPerson">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
  
      <!--  主体  -->
      <div class="manager-main">
        <!--  侧边栏  -->
        <div class="manager-main-left">
          <el-menu router style="border: none" :default-active="$route.path">
            <el-menu-item index="/home">
              <i class="el-icon-s-home"></i>
              <span slot="title">系统首页</span>
            </el-menu-item>
            <el-submenu index="info">
              <template slot="title">
                <i class="el-icon-menu"></i><span>信息管理</span>
              </template>
              <el-menu-item :index="user.role === 'HELPER' ? '/helper/notice' : '/notice'">公告信息</el-menu-item>
              <el-menu-item :index="user.role === 'HELPER' ? '/helper/information' : '/information'">扶贫资讯</el-menu-item>
              <el-menu-item :index="user.role === 'HELPER' ? '/helper/policy' : '/policy'">扶贫政策</el-menu-item>
              <el-menu-item :index="user.role === 'HELPER' ? '/helper/goods' : '/goods'">扶贫商品</el-menu-item>
              <el-menu-item :index="user.role === 'HELPER' ? '/helper/orders' : '/orders'">订单信息</el-menu-item>

              <el-menu-item :index="user.role === 'HELPER' ? '/helper/comment' : '/comment'">政策评论</el-menu-item>
            </el-submenu>
            <el-submenu index="apply">
              <template slot="title">
                <i class="el-icon-menu"></i><span>申请上传</span>
              </template>
              <el-menu-item :index="user.role === 'HELPER' ? '/helper/apply' : '/apply'">帮扶金申请</el-menu-item>
              <el-menu-item :index="user.role === 'HELPER' ? '/helper/apply2' : '/apply2'">工作日志上传</el-menu-item>
             
            </el-submenu>
            <el-submenu index="user">
              <template slot="title">
                <i class="el-icon-menu"></i><span>人员信息查看</span>
              </template>
              <el-menu-item :index="user.role === 'HELPER' ? '/helper/user' : '/user'">对接信息</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
  
        <!--  数据表格  -->
        <div class="manager-main-right">
          <router-view @update:user="updateUser" />
        </div>
      </div>
  
    </div>
  </template>
  
  <script>
  export default {
    name: "Manager",
    data() {
      return {
        user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      }
    },
    created() {
      if (!this.user.id) {
        this.$router.push('/login')
      }
    },
    methods: {
      updateUser() {
        this.user = JSON.parse(localStorage.getItem('xm-user') || '{}')   // 重新获取下用户的最新信息
      },
      goToPerson() {
        if (this.user.role === 'HELPER') {
          this.$router.push('/helper/adminPerson')
        }
      },
      logout() {
        localStorage.removeItem('xm-user')
        this.$router.push('/login')
      }
    }
  }
  </script>
  
  <style scoped>
  @import "@/assets/css/manager.css";
  </style>